<template>
  <div
    class="page-module login-container backgroundCover flex width_100 height_100"
  >
    <div class="login-panel" @keyup.enter="onSubmit">
      <div class="head-text align_center">
        <img src="../assets/images/logo.png" />
      </div>
      <el-form
        class="login-form"
        size="medium"
        :model="form"
        :rules="rules"
        ref="form"
      >
        <el-form-item prop="username">
          <el-input
            placeholder="请输入账户名："
            autofocus
            v-model="form.username"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            placeholder="请输入账户密码："
            v-model="form.password"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="width_100"
            icon="el-icon-check"
            @click="onSubmit"
            :loading="submitLoad"
          />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// import {mapActions} from 'vuex'
import md5 from 'js-md5'
export default {
  data() {
    return {
      form: {
        username: null,
        password: null,
      },
      rules: {
        username: [
          { required: true, message: "请输入账户名！", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入账户密码！", trigger: "blur" },
        ],
      },
      submitLoad: false,
    };
  },
  methods: {
    // ...mapActions({
    //   setUserInfo: SET_USER_INFO,
    // }),
    onSubmit() {
      let obj = {
        username: this.form.username,
        password: md5(this.form.password)
      }
      this.$post(`/user/login`, obj).then((res) => {
        if (res.error == 0) {
          this.$router.push({ path: "/machine" });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });

      // this.$fetch(`/set_cookie`, obj);

    },
  },
};
</script>

<style lang="scss" type="text/scss" rel="stylesheet/scss">
.login-container {
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background-image: url(../assets/images/login_body.jpg);

  .login-panel {
    padding: 25px 15px;
    width: 350px;
    border-radius: 3px;
    background-color: #fff;
  }

  .head-text {
    margin-bottom: 25px;
  }
}
</style>